<template>
  <div class="tmpl">
    <h1>父子组件与兄弟组件通信</h1>
    <h3>子组件通信为 {{childMsg}}</h3>
    <my-bar :message="parentMsg" v-on:showMsg="getMsg">
       <template #default>
          <ul>
            <li>匿名插槽内容11</li>
            <li>匿名插槽内容22</li>
            <li>匿名插槽内容33</li>
          </ul>
        </template>
    </my-bar>
    <my-baz>
        <template v-slot:header="items">
          <p>具名插槽 header</p>
          <p>作用域插槽： {{items.user.name}}</p>
        </template>
        <template v-slot:default>
          <p>匿名插槽内容</p>
        </template>
        <template v-slot:footer>
          <p>具名插槽 footer</p>
        </template>
    </my-baz>
  </div>
</template>

<script>
import MyBar from '@/components/Foo/Bar.vue'
import MyBaz from '@/components/Foo/Baz.vue'
export default {
  name: 'Foo',
  components: {
    MyBar, MyBaz
  },
  data () {
    return {
      parentMsg: 'abc123',
      childMsg: ''
    }
  },
  methods: {
    getMsg: function (data) {
      this.childMsg = data
    }
  }
}
</script>

<style scoped>
h1 {
  font-weight: normal;
}
</style>
